<template>
  <div class="container">
    <van-row>
      <van-col span="24">
        <van-nav-bar
          :title="list.name"
          left-text="列表"
          left-arrow
          @click-left="onClickLeft"
        />
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
          <p class="ly" v-for="(it ,index) in lyric" :key="index">{{it.lineLyric}}</p>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="24">
        <audio id="player" :src="url" controls></audio>
      </van-col>
    </van-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      url: "",
      list:{},
      lyric:[],
    };
  },
  methods:{
      onClickLeft:function () {
          history.back()
      }
  },
  async mounted() {
    let res = await this.$http.get("/musicurl", {
      params: { id: this.$route.query.it.rid },
    });
    let res1 = await this.$http.get('/lyric',{
      params: { id: this.$route.query.it.rid },
    })
    this.lyric = res1.data.data.lrclist;
    this.list = this.$route.query.it
    this.url = res.data.data.url;
  },
};
</script>

<style>
.container {
  position: relative;
  height: 12.78rem;
  background-color: rgba(229, 229, 229, 0.5);
}
.player,
audio {
  position: absolute;
  bottom: 0px;
  width: 100%;
}
.ly{
    font-size: 16px;
}
</style>